<template>
  <header>
    <div class="header-content">
      <img src="@/assets/logo.png" height="60px">
      <el-menu
          :default-active="navIndex"
          mode="horizontal"
          :ellipsis="false"
          active-text-color="#CA0006"
      >
        <el-sub-menu v-for="(nav, index) in navList" :key="index" :index="nav.index">
          <template #title>{{ nav.title }}</template>
          <div class="menu_title">{{ nav.title }}</div>
          <el-menu-item v-for="child in nav.children" :key="child.index" :index="child.index">
            <router-link v-if="child.path" :to="child.path" style="color: inherit;">
              {{ child.title }}
            </router-link>
            <a v-else :href="child.href" target="_blank" style="color: inherit;">{{ child.title }}</a>
          </el-menu-item>
        </el-sub-menu>
      </el-menu>
    </div>
  </header>
</template>

<script setup>
import {ref} from 'vue'
import {Right} from "@element-plus/icons-vue";

const navIndex = ref('0')
const navList = [
  {
    title: '走进坤石',
    index: '2',
    children: [
      {
        index: '2-1',
        title: '坤石介绍',
        path: '/introduce',
      },
      {
        index: '2-2',
        title: '坤石业务',
        path: '/business',
      },
      {
        index: '2-3',
        title: '坤石优势',
        path: '/advantage',
      },
      {
        index: '2-4',
        title: '坤石架构',
        path: '/framework',
      },
      {
        index: '2-5',
        title: '坤石文化',
        path: '/culture',
      },
      {
        index: '2-6',
        title: '坤石荣誉',
        path: '/honor',
      },
      {
        index: '2-7',
        title: '精英团队',
        path: '/team',
      },
    ]
  },
  {
    title: '坤石动态',
    index: '3',
    children: [
      {
        index: '3-1',
        title: '新闻动态',
        path: '/news',
      },
      {
        index: '3-2',
        title: '论坛活动',
        path: '/forum',
      },
    ]
  },
  {
    index: '4',
    title: '咨询中心',
    children: [
      {
        index: '4-1',
        title: '核心业务',
        path: '/core',
      },
      {
        index: '4-2',
        title: '项目流程',
        path: '/process',
      },
      {
        index: '4-3',
        title: '股权激励研究院',
        path: '/equity',
      },
      {
        index: '4-4',
        title: '财税风控研究院',
        path: '/tax',
      },
      {
        index: '4-5',
        title: '品牌策划研究院',
        path: '/brand',
      },
      {
        index: '4-6',
        title: '战略绩效研究院',
        path: '/performance',
      },
      {
        index: '4-7',
        title: '精益生产研究院',
        path: '/production',
      },
      {
        index: '4-8',
        title: '成功案例',
        path: '/case',
      },
      {
        index: '4-9',
        title: '企业陪跑',
        path: '/run',
      },
    ]
  },
  {
    index: '5',
    title: '培训中心',
    children: [
      {
        index: '5-1',
        title: '咨询式内训',
        path: '/train',
      },
      {
        index: '5-2',
        title: '实战特训营',
        path: '/workshop',
      },
      {
        index: '5-3',
        title: '企业商学院',
        path: '/college',
      },
      {
        index: '5-4',
        title: '创新管理学院',
        path: '/innovation',
      },
    ]
  },
  {
    index: '6',
    title: '尧君智库',
    children: [{
      index: '6-1',
      title: '官网主页',
      href: 'https://www.yaojunzhiku.com',
    }, {
      index: '6-2',
      title: '关于尧君',
      href: 'https://www.yaojunzhiku.com',
    }]
  },
  {
    index: '7',
    title: '关于我们',
    children: [
      {
        index: '7-1',
        title: '招贤纳士',
        path: '/happen',
      },
      {
        index: '7-2',
        title: '合作渠道',
        path: '/channel',
      },
      {
        index: '7-3',
        title: '联系我们',
        path: '/about',
      },
    ]
  }
]
const href = window.location.hash;
console.info(href)
// navList 中的 children 中查询匹配path web页面的hash值，找到对应的index值，赋值给navIndex
navList.forEach(nav => {
  nav.children.forEach(child => {
    if (child.path === href.slice(1)) {
      navIndex.value = child.index;
    }
  });
});

</script>

<style scoped lang="scss">
header {
  border-bottom: 1px solid #e6e6e6;
  background: #fff;
  position: fixed;
  width: 100%;
  z-index: 9;
  top: 0;
}

.header-content {
  max-width: 1200px;
  min-width: 960px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.menu_title {
  margin: 12px 16px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  background-color: #e6e6e8;
  font-size: 14px;
  padding: 0 16px;
  color: #252b3a;
  font-weight: bold;
  position: relative;
}


:deep(.el-menu--horizontal.el-menu) {
  border-bottom: none !important;
}

:deep(.el-sub-menu__title) {
  font-size: 15px !important;
  font-weight: bold;
}

.el-menu--horizontal .el-menu-item:not(.is-disabled):focus, .el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
  background-color: #f5f5f5 !important;
  color: #CA0006 !important;
}

:deep(.el-menu--horizontal>.el-sub-menu .el-sub-menu__title:hover){

  color: #CA0006 !important;
}

:deep(.el-menu--horizontal>.el-sub-menu .el-sub-menu__title){
  border-bottom: 5px solid transparent !important;
}

 :deep(.el-menu--horizontal>.el-sub-menu.is-active .el-sub-menu__title) {
  border-bottom: 5px solid #CA0006 !important;
}


.el-menu-item {
  justify-content: center !important;
  padding: 0 16px !important;
}

.el-menu-item.is-active {
  font-weight: bold !important;
}


a {
  text-decoration: none !important;
}

</style>
